<template>
  <div class="order-warp">
    <van-nav-bar title="订单列表" left-arrow @click-left="onClickLeft" fixed />
    <van-tabs v-model="active" animated color="#c3a769" @change="changeHandle" swipe-threshold="5">
      <van-tab v-for="nav in navList" :title="nav.title" :key="nav.id">
        <OrderAll></OrderAll>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar } from "vant";
import { Tab, Tabs } from "vant";
import OrderAll from "./OrderAll";

Vue.use(NavBar);
Vue.use(Tab);
Vue.use(Tabs);

export default {
  data() {
    return {
      active: Number(this.$route.params.status),
      navList: [
        {
          id: "0",
          title: "全部"
        },
        {
          id: "1",
          title: "待付款"
        },
        {
          id: "2",
          title: "待发货"
        },
        {
          id: "3",
          title: "待收货"
        },
        {
          id: "4",
          title: "待评价"
        }
      ]
    };
  },
  components: {
    OrderAll
  },
  methods: {
    onClickLeft() {
      this.$router.push('/redwine/user');
    },
    changeHandle(name) {
      this.active = name;
      this.$router.push("/order/" + name);
    }
  }
};
</script>

<style lang="stylus" scoped>
.order-warp {
  background-color: #f8f8f8;
  min-height: 100%;
  padding-top: 0.46rem;
}

.van-nav-bar >>> .van-icon {
  color: #0f0f0f !important;
}
</style>